<template>
  <el-row>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <el-form-item label="项目名称" prop="nickname">
        <el-input v-model="queryParams.NursingName" placeholder="请输入名称" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" size="small" @click="queryList"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>
  </el-row>

  <el-row v-loading="loading">
    <el-table :data="tableData">
      <el-table-column label="序号" type="index" width="80" align="center" />
      <el-table-column prop="serialNumber" label="项目编号" width="100" align="center" />
      <el-table-column prop="nursingName" label="项目名称" width="100" align="center" />
      <el-table-column prop="servicePrice" label="项目价格" width="100" align="center" />
      <el-table-column prop="message" label="项目描述" width="180" align="center" />
      <el-table-column prop="executionCycle" label="循环模式" width="80" align="center" />
      <el-table-column prop="executionTimes" label="循环次数" width="80" align="center" />
      <el-table-column
        prop="status"
        label="状态"
        width="80"
        align="center"
        :formatter="formatStats"
      />
      <el-table-column label="操作" align="center" width="300">
        <template #default="scope">
          <el-button
            type="success"
            size="small"
            icon="StarFilled"
            round
            @click="openAddEditDialog(scope.row.id)"
            >增加服务</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- v-model 组件里面的数据修改 外面的 queryParams.current 改变，tableData也会改变 -->
    <el-pagination
      layout="sizes ,prev, pager, next, jumper, ->, total,"
      :total="queryParams.total"
      v-model:page-size="queryParams.size"
      v-model:current-page="queryParams.current"
      @current-change="queryList"
      @size-change="queryList"
      :page-sizes="[2, 3, 5, 10, 20]"
    />
  </el-row>

  <!-- <el-dialog v-model="showEdit" title="项目编辑" style="width: 600px">
    <Edit v-if="showEdit" :closeEdit="closeEdit" :editId="editId" />
  </el-dialog> -->

  <el-dialog v-model="showaddEdit" title="增加服务" style="width: 600px">
    <addEditComponent v-if="showaddEdit" :closeaddEdit="closeaddEdit" :editId="editId" />
  </el-dialog>
</template>

<script setup name="careProject">
import { onMounted } from "vue";
import { ref } from "vue";
// 导出添加信息组件
import Edit from "./edit.vue";
import addEditComponent from "@/views/healthButler/serviceFocus/addEdit.vue";
import { listInfo, removeById } from "@/api/CareManagement/careProject/index";
import { ElMessageBox, ElNotification } from "element-plus";
// 定义加载状态
const loading = ref(false);

// 表格数据
const tableData = ref([]);
const queryParams = ref({
  NursingName: "",
  current: 1,
  size: 5,
  total: 0,
});

async function queryList() {
  loading.value = true;
  try {
    const page = await listInfo({
      ...queryParams.value, // 确保 name 参数被传递
      NursingName: queryParams.value.NursingName, // 明确传递 name 参数
    });
    loading.value = false;
    tableData.value = page.records;
    queryParams.value.total = page.total;
    console.log(page);
  } catch (e) {
    loading.value = true;
  }
}
const formatStats = (row, column, cellValue) => {
  return cellValue === 1 ? "启用" : cellValue === 2 ? "禁用" : "";
};

const showaddEdit = ref(false);

// 关闭添加子组件页面 因为组件中需要有cancleEdit方法 所以加入query参数 true时刷新 false时不刷新
const closeaddEdit = (query) => {
  // 保存后关闭添加子组件页面 并重新查询
  showaddEdit.value = false;
  if (query) {
    queryList();
  }
};

// 点击修改按钮 将数值传入closeEdit方法 而后获得userid进行修改
// 待修改的用户editId
const editId = ref(0);

// 修改按钮跳转到子组件 并附带userid属性
const openAddEditDialog = (id) => {
  // 赋值
  editId.value = id;
  showaddEdit.value = true;
};

// 加载当前页面完成之后查询
onMounted(() => {
  queryList();
});
</script>

<style scoped></style>
